<template>  
  <div>  
    <div class="admin-main">  
      <!-- 导航栏 -->  
      <div class="navigation-bar">  
        <!-- 管理员信息 -->  
        <div class="admin-information">  
          <span class="adminName">Hello Admin</span>  
        </div>  
        <div class="list-information">  
          <ul class="nav-ul">  
            <li>  
              <div class="nav-li-div">用户管理</div>  
              <ul class="div-ul"> 
				<!--动态绑定class--> 
                <li  
                  @click="qiehuan(0)"  
                  :class="{ 'default-state': !isClicked(0), 'clicked-state': isClicked(0) }"  
                >  
                  教师申请  
                </li>  
                <li  
                  @click="qiehuan(1)"  
                  :class="{ 'default-state': !isClicked(1), 'clicked-state': isClicked(1) }" 
                >  
                  用户信息  
                </li>  
              </ul>  
            </li>  
          </ul>  
        </div>  
      </div>  
      <div class="function-module">  
        <div class="module-index">  
          <div id="mIndex"></div>  
          <div class="admin-permiss">information</div>  
        </div>  
        <component :is="choose[mun]"></component>  
      </div>  
    </div>  
  </div>  
</template>
  
<script>
import Teacher from "./components/Teacher.vue";
import User from "./components/User.vue";
export default {
  data() {
    return {
      choose: [Teacher, User],
      mun: 0,
    };
  },
  components: {
    Teacher,
    User,
  },
  methods: {
    qiehuan(index) {
     if(index==0){
		this.mun=0
		console.log(0);
	 }
	 if(index==1){
		this.mun=1
		console.log(1);
	 }
    },
    isClicked(index) {
      // 判断某个元素是否被点击，用于绑定类名的条件判断
     if(index==0){
     return this.mun === 0; // 如果索引为0，那么检查mun是否为0，如果是，返回true，表示被点击，否则返回false。  
      } else if (index === 1) {  
        return this.mun === 1; // 如果索引为1，那么检查mun是否为1，如果是，返回true，表示被点击，否则返回false。  
      } else {  
        return false; // 如果索引不在0和1之间，返回false，表示没有被点击。  
      }  
    },  
  },  
};  
</script>

<style>
.default-state {
  background-color: lightblue;
  color: white;
}

.clicked-state {
  background-color: pink;
}
body {
  background-color: black;
  padding: 0px;
  margin: 0px;
}

.admin-main {
  width: 98%;
  height: 96%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  /* 取消块限制 */
  display: flex;
  margin: 1%;
}
/* 导航栏 */

.navigation-bar {
  width: 20%;
  height: 100%;
  background-color: #ffffff;
}
/* 功能模块 */

.function-module {
  width: 80%;
  height: 100%;
  background-color: #f2f2f2;
}
body {
  background-color: black;
  padding: 0px;
  margin: 0px;
}

.admin-main {
  width: 98%;
  height: 96%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  /* 取消块限制 */
  display: flex;
  margin: 1%;
}

/* 导航栏 */

.navigation-bar {
  width: 20%;
  height: 100%;
  background-color: #ffffff;
}

.admin-information {
  background-color: pink;
  height: 50px;
}

.admin-information > .adminName {
  background-color: ivory;
  position: absolute;
  padding: 10px;
  top: 4px;
  border-radius: 0 20px 20px 0;
}

.nav-li-div {
  padding: 8px;
}

.nav-ul,
.div-ul {
  list-style-type: none;
  padding: 0px;
  cursor: pointer;
}

.nav-ul > li {
  margin: 5px;
}

.div-ul > li {
  padding: 10px;
  margin-left: 10px;
  /* 子菜单弧度 */
  border-radius: 0 20px 20px 0;
}

/* 功能模块 */

.function-module {
  width: 80%;
  height: 100%;
  background-color: #f2f2f2;
}

.module-index {
  /* 功能模块索引 */
  background-color: #ffffff;
  height: 50px;
}

#mIndex {
  float: left;
  position: relative;
  padding: 10px;
  top: 4px;
}

.admin-permiss {
  float: right;
  position: relative;
  padding: 10px;
  top: 4px;
  /* 设置弧度 */
  border-radius: 20px 0 0 20px;
  background-color: pink;
}
</style>